<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" />
    <title>MyCAT EYE-mycat node</title>
    <link href="bootstrap-3.3.5-dist/css/bootstrap.min.css" title="" rel="stylesheet" />
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="css/jquery.mloading.css" />
    <link title="blue" href="css/dermadefault.css" rel="stylesheet" type="text/css" />
    <link title="green" href="css/dermagreen.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link title="orange" href="css/dermaorange.css" rel="stylesheet" type="text/css" disabled="disabled" />
    <link href="css/templatecss.css" rel="stylesheet" title="" type="text/css" />
    <link href="css/jquery.dataTables.min.css" rel="stylesheet" title="" type="text/css" />
    <link title="" href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav class="nav navbar-default navbar-mystyle navbar-fixed-top">
    <div class="navbar-header">
        <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand mystyle-brand"><span class="glyphicon glyphicon-home"></span></a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
            <li class="">
                <a class="mystyle-color" href="../index.html">MyCAT EYE&nbsp;&nbsp;&nbsp;</a>
            </li>
        </ul>
        <ul class="nav navbar-nav pull-right">
            <li class="dropdown" style="min-width:165px;">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mysql：
                    <span id="currentServerId" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulNodeList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">&nbsp;当前Mycat：
                    <span id="mycat_server" data-value="">所属节点</span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu" id="ulMycatList">
                    <li class="dropdown-item"><a class="dropdown-item" data-name="所属节点" data-value="">所属节点</a></li>
                </ul>
            </li>
            <li class="dropdown li-border">
                <a href="#" class="dropdown-toggle mystyle-color" data-toggle="dropdown">
                    &nbsp;<span id="login_admin"></span>
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="javascript:void(0)" id="modifyPassword">修改密码</a></li>
                    <li><a href="javascript:void(0)" id="logout">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="down-main">
    <div class="left-main left-full">
        <div class="sidebar-fold">
            <span class="glyphicon glyphicon-menu-hamburger"></span>
        </div>
        <div class="subNavBox">
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span><span
                        class="sublist-title">常用功能</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />控制台
                        </div>
                        <a href="dashboard.html">
                            <span class="sublist-icon fa fa-dashboard"></span>
                            <span class="sub-title">控制台</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />变量管理
                        </div>
                        <a href="var-manage.html">
                            <span class="sublist-icon fa fa-dot-circle-o"></span>
                            <span class="sub-title">变量管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">InnoDB引擎</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />基本状态
                        </div>
                        <a href="innodb-status.html">
                            <span class="sublist-icon fa fa-heartbeat"></span>
                            <span class="sub-title">基本状态</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />事务查看
                        </div>
                        <a href="innodb-trx.html">
                            <span class="sublist-icon fa fa-retweet"></span>
                            <span class="sub-title">事务查看</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />锁等待信息
                        </div>
                        <a href="innodb-lockwaits.html">
                            <span class="sublist-icon fa fa-lock"></span>
                            <span class="sub-title">锁等待信息</span></a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mysql管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql集群管理
                        </div>
                        <a href="cluster-manage.html">
                            <span class="sublist-icon fa fa-list"></span>
                            <span class="sub-title">Mysql集群管理</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mysql节点管理
                        </div>
                        <a href="node-manage.html">
                            <span class="sublist-icon fa fa-cubes"></span>
                            <span class="sub-title">Mysql节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">Mycat管理</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat集群管理
                        </div>
                        <a href="mycat-cluster.html">
                            <span class="sublist-icon fa fa-database"></span>
                            <span class="sub-title">Mycat集群管理</span>
                        </a>
                    </li>
                    <li class="active">
                        <div class="showtitle">
                            <img src="img/leftimg.png" />Mycat节点管理
                        </div>
                        <a href="mycat-node.html">
                            <span class="sublist-icon fa fa-cube"></span>
                            <span class="sub-title">Mycat节点管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="sBox">
                <div class="subNav sublist-down">
                    <span class="title-icon fa fa-angle-down"></span>
                    <span class="sublist-title">设置</span>
                </div>
                <ul class="navContent">
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />系统属性
                        </div>
                        <a href="mycat-setting-myid.html">
                            <span class="sublist-icon fa fa-ban"></span>
                            <span class="sub-title">系统属性</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />参数配置
                        </div>
                        <a href="mycat-setting-server.html">
                            <span class="sublist-icon fa fa-list-alt"></span>
                            <span class="sub-title">参数配置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />数据源设置
                        </div>
                        <a href="mycat-setting-schema.html">
                            <span class="sublist-icon fa fa-cloud"></span>
                            <span class="sub-title">数据源设置</span>
                        </a>
                    </li>
                    <li>
                        <div class="showtitle">
                            <img src="img/leftimg.png" />分片设置
                        </div>
                        <a href="mycat-setting-rule.html">
                            <span class="sublist-icon fa fa-share"></span>
                            <span class="sub-title">分片设置</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <div class="right-product right-full">
        <div class="container-fluid">
            <div class="info-center">
                <div class="page-header">
                    <div class="pull-left">
                        <h4>节点管理</h4>
                    </div>
                    <div class="pull-right mt10">
                        <button class="btn btn-info btn-add" id="btn-add">新增节点</button>
                    </div>
                </div>

                <div class="panel panel-default panel-intro table-margin">
                    <div class="panel-body">
                        <div class="tab-content">
                            <div class="tab-pane fade active in" id="one">
                                <div class="widget-body no-padding">
                                    <div class="table-responsive no-padding">
                                        <table class="table table-striped" id="mycatTable">
                                            <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>名称</th>
                                                <th>主机</th>
                                                <th>管理端口</th>
                                                <th>服务端口</th>
                                                <th>是否集群节点</th>
                                                <th>所属集群</th>
                                                <th>启动时间</th>
                                                <th>用户</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- 新增|编辑弹出框 -->
    <div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myModalLabel"><span>新增</span>节点</h5>
                    <button type="button" class="fa fa-close close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <input type="hidden" value="" id="id" name="id" />
                        <div class="form-group row">
                            <label for="serverName" class="col-xs-12 col-sm-3 col-form-label text-right">名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="text" value="" id="serverName" name="serverName">
                                <p class="text-danger fade" role="serverName">名称不可为空</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="serverHost" class="col-xs-12 col-sm-3 col-form-label text-right">主机：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="text" value="" id="serverHost" name="serverHost">
                                <p class="text-danger fade" role="serverHost">主机不可为空</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="managerPort" class="col-xs-12 col-sm-3 col-form-label text-right">管理端口：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="number" value="" id="managerPort" name="managerPort">
                                <p class="text-danger fade" role="managerPort">端口必须大于0</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="serverPort" class="col-xs-12 col-sm-3 col-form-label text-right">服务端口：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="number" value="" id="serverPort" name="serverPort">
                                <p class="text-danger fade" role="serverPort">端口必须大于0</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="serverPort" class="col-xs-12 col-sm-3 col-form-label text-right">用户名：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="text" value="" id="user" name="user">
                                <p class="text-danger fade" role="user">用户名不可为空</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="serverPort" class="col-xs-12 col-sm-3 col-form-label text-right">密码：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input class="form-control" type="password" value="" id="password" name="password">
                                <p class="text-danger fade" role="password">密码</p>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="isClusterNode" class="col-xs-12 col-sm-3 col-form-label text-right">是否集群节点：</label>
                            <div class="col-xs-12 col-sm-9">
                                <label class="custom-control custom-radio">
                                    <input name="isClusterNode" value="1" type="radio" class="custom-control-input isClusterNode">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">是</span>
                                </label>
                                <label class="custom-control custom-radio">
                                    <input name="isClusterNode" value="0" checked type="radio" class="custom-control-input isClusterNode">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">否</span>
                                </label>
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="clusterId" class="col-xs-12 col-sm-3 col-form-label text-right">所属集群：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select class="form-control" id="clusterId" name="clusterId">
                                    <option selected value="">所属集群...</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info btn-submit">提交</button>
                </div>
            </div>
        </div>
    </div>

    <!-- javascript -->
    <script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="script/jquery.cookie.js" type="text/javascript"></script>
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="script/bootbox.min.js" type="text/javascript"></script>
    <script src="script/jquery.dataTables.min.js"></script>
    <!-- loading效果 -->
    <script src="script/jquery.mloading.js"></script>
    <!-- 自定义javascript -->
    <script src="script/custom/menu.js"></script>
    <script src="script/custom/login-auth.js"></script>
    <script src="script/custom/modify-password.js"></script>
    <script src="script/custom/current-node.js"></script>
    <script src="../assets/js/utils.js"></script>
    <script type="text/javascript">
        // list
        var table;
        function fetchData() {
            if(table){
                table.destroy();
            }
            table = $('#mycatTable').DataTable({
                'oLanguage': dtb.oLanguage,
                'ajax': '/mycat/server/list',
                'columns': [
                    {'data': 'id'},
                    {'data': 'serverName'},
                    {'data': 'serverHost'},
                    {'data': 'managerPort'},
                    {'data': 'serverPort'},
                    {'data': 'isClusterNode'},
                    {'data': 'clusterId'},
                    {'data': 'startup'},
                    {'data': 'user'}
                ],
                'columnDefs': [
                    {
                        'render': function(data,type,row){
                            return '<a href="javascript:void(0)" class="btn-del text-info" data-id="'+row['id']+'"><i class="fa fa-trash-o"></i> 删除</a> ' +'| <a href="javascript:void(0)" class="btn-edit text-info" data-id="'+row['id']+'"><i class="fa fa-edit"></i> 编辑</a>' +'';
                        },
                        'targets': 9
                    }
                ]
            });
        }
        fetchData();

        //
        var myModal = $('#myModal');

        // 新增
        $("#btn-add").on("click",function(e){
            var btn = $(e.currentTarget);
            myModal.find('.form-control').val('');
            myModal.find('#id').val('');
            fetchDetail('',false);
        });

        // 编辑
        $("#mycatTable").on("click",".btn-edit",function(e){
            var btn = $(e.currentTarget);
            var id = btn.data('id');
            myModal.find('.form-control').val('');
            myModal.find('#id').val(id);
            fetchDetail('/mycat/server/detail/'+id,true);
        });

        var clusterIds = myModal.find('#clusterId');
        var clusters = [];
        function fetchDetail(url,isEdit){
            $.get('/mycat/cluster/list').done(function (res) {
                console.log('done',res);
                myModal.modal('show');
                clusters = res.data || [];
                var html = ['<option selected value="">所属集群...</option>'];
                for(var i=0;i<clusters.length;i++){
                    html.push('<option value="'+clusters[i]["id"]+'">'+clusters[i]["clusterName"]+'</option>');
                }
                clusterIds.html(html.join(''));
                if(isEdit){
                    $.get(url,function (res) {
                        console.log('edit',res)
                        if(res.code && res.code == 200){
                            myModal.modal('show');
                            myModal.find('#serverName').val(res.data['serverName']);
                            myModal.find('#serverHost').val(res.data['serverHost']);
                            myModal.find('#managerPort').val(res.data['managerPort']);
                            myModal.find('#serverPort').val(res.data['serverPort']);
                            myModal.find('#user').val(res.data['user']);
                            myModal.find('#password').val(res.data['password']);
                            myModal.find('input[name="isClusterNode"]').val(res.data['isClusterNode']);
                            myModal.find('#clusterId').val(res.data['clusterId']);
                        }else{
                            notifi.error('Error: '+res.message)
                        }
                    });
                }
            }).fail(function () {
                notifi.error('ajax fail');
            });
        }

        // 保存
        myModal.on('click','.btn-submit',function(e){
            var id = $('#id').val();
            var param = {
                "serverName": $('#serverName').val().trim(),
                "serverHost": $('#serverHost').val().trim(),
                "serverPort": $('#serverPort').val(),
                "managerPort": $('#managerPort').val(),
                "user": $('#user').val().trim(),
                "password": $('#password').val().trim(),
                "isClusterNode": $('input[name="isClusterNode"]:checked').val(),
                "clusterId": $('#clusterId').val()
            };
            if(param.serverName==''){
                $('#serverName').next('p').removeClass('fade');
                return;
            }else{
                $('#serverName').next('p').addClass('fade');
            }
            if(param.serverHost==''){
                $('#serverHost').next('p').removeClass('fade');
                return;
            }else{
                $('#serverHost').next('p').addClass('fade');
            }
            if(param.serverPort==0){
                $('#serverPort').next('p').removeClass('fade');
                return;
            }else{
                $('#serverPort').next('p').addClass('fade');
            }
            if(param.managerPort==0){
                $('#managerPort').next('p').removeClass('fade');
                return;
            }else{
                $('#managerPort').next('p').addClass('fade');
            }
            if(param.user==''){
                $('#user').next('p').removeClass('fade');
                return;
            }else{
                $('#user').next('p').addClass('fade');
            }
            if(param.isClusterNode == '1'){
                if(param.clusterId=='') {
                    $('#clusterId').next('p').removeClass('fade');
                    return;
                }else{
                    $('#clusterId').next('p').addClass('fade');
                }
            }else{
                param.clusterId='';
            }

            var url = '/mycat/server/detail',method = 'POST';
            if(id!=''){
                url += '/'+id;
                method = 'PUT';
                param.id = id;
            }
            $.ajax({
                url: url,
                method: method,
                data: JSON.stringify(param),
                dataType: 'json',
                contentType:'application/json; charset=UTF-8',
                success: function(res, status,jqxhr){
                    console.log(res);
                    if(res.code && res.code==200){
                        myModal.modal('hide');
                        fetchData();
                    }else{
                        notifi.error('Error: '+res.message)
                    }
                },
                error: function(err,status){
                    console.log(err);
                    notifi.error(err || err.message? err.message:'');
                }
            });
        });

        // 删除
        $("#mycatTable").on("click",".btn-del",function(e) {
            var btn = $(e.currentTarget);
            var id = btn.data('id');
            if(confirm('确定删除节点'+id+'?')){
                $.ajax({
                    url: '/mycat/server/detail/'+id,
                    method: 'DELETE',
                    success: function(res, status,jqxhr){
                        console.log(res);
                        if(res.code && res.code==200){
                            fetchData();
                        }else{
                            notifi.error('Error: '+res.message)
                        }
                    },
                    error: function(err,status){
                        console.log(err);
                        notifi.error(err || err.message? err.message:'');
                    }
                });
            }
        });
    </script>
</body>
</html>
